export default {
    template: `
        <div class="user-page">
            <el-button type="primary" @click="fetchUsers">刷新数据</el-button>

            <div class="table-container">
                <el-table :data="users" border class="fixed-table">
                    <el-table-column prop="id" label="ID" width="60"></el-table-column>
                    <el-table-column prop="module_id" label="模块ID" width="80"></el-table-column>
                    <el-table-column prop="field" label="字段名称"></el-table-column>
                    <el-table-column prop="name" label="字段描述"></el-table-column>
                    <el-table-column prop="tips" label="字段提示"></el-table-column>
                    <el-table-column prop="required" label="必填" width="80">
                        <template #default="{ row }">
                            <el-tag :type="row.required === 1 ? 'success' : 'danger'">
                                {{ row.required === 1 ? '是' : '否' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="minlength" label="最小长度" width="100"></el-table-column>
                    <el-table-column prop="maxlength" label="最大长度" width="100"></el-table-column>
                    <el-table-column prop="type" label="字段类型"></el-table-column>
                    <el-table-column prop="create_time" label="创建时间" width="180">
                        <template #default="{ row }">{{ formatTime(row.create_time) }}</template>
                    </el-table-column>
                    <el-table-column prop="update_time" label="更新时间" width="180">
                        <template #default="{ row }">{{ formatTime(row.update_time) }}</template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页始终固定在底部 -->
            <div class="pagination-container">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="page"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    `,
    data() {
        return {
            users: [],
            page: 1,
            total: 0
        };
    },
    methods: {
        async fetchUsers() {
            try {
                const response = await fetch(`/member/users?page=${this.page}`);
                const res = await response.json();
                if (res.status === 1) {
                    this.users = res.data.users;
                    this.total = res.data.total;
                } else {
                    ElMessage.error('获取数据失败');
                }
            } catch (error) {
                ElMessage.error("数据加载失败");
            }
        },
        handlePageChange(newPage) {
            this.page = newPage;
            this.fetchUsers();
        },
        formatTime(timestamp) {
            if (!timestamp) return '-';
            const date = new Date(timestamp * 1000);
            return date.toLocaleString();
        }
    },
    mounted() {
        this.fetchUsers();
    }
};
